<template>
  <div class="home">
    <!-- <van-nav-bar
      title="扫码填报"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <!-- <van-nav-bar class="blue" title="入连人员自主报备" /> -->
    <img src="../../assets/images/rlzzbb.png" />

    <van-form validate-first ref="formDataRef" @submit="onSubmit">
      <!-- <div block type="info" class="get-area" @click="testNfc" >刷卡读取身份证信息</div> -->
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right" label="姓名" required v-model="formData.name" name="pattern" placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]" />
      <!-- <van-field
        input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field input-align="right" label="证件类型" required v-model="formData.card_type" name="pattern"
        placeholder="请选择证件类型" @focus="showCertificate = true" :rules="[{ required: true, message: '请选择证件类型' }]" />
      <van-field input-align="right" label="证件号码" required v-model="formData.card_no" name="pattern" placeholder="请输入证件号码"
        :rules="[{ required: true, message: '请选择证件类型' }]" maxlength="18" />
      <!-- <van-field
        input-align="right"
        label="出生日期"
        required
        @focus="showDate = true"
        v-model="formData.bithday"
        name="pattern"
        placeholder="请输入出生日期 例:1975/08/21"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->

      <!-- :rules="[{ required: true, message: '请输入正确内容' }]" -->

      <van-field input-align="right" label="手机号" required v-model="formData.mobile" name="phoneRules" placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入正确内容' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }
        ]" />
      <van-field input-align="right" label="来连方式" required v-model="formData.trave_mode" :key="new Date().toString()"
        name="pattern" placeholder="请选择来连方式" @focus="showTrave = true"
        :rules="[{ required: true, message: '请选择来连方式' }]" />
      <van-field input-align="right" :label="range_label" v-show="showTwoLabel" v-model="formData.range_number"
        name="pattern" :placeholder="range_place" />
      <van-field input-align="right" :label="seat_number_label" v-show="showTwoLabel" v-model="formData.seat_number"
        name="pattern" :placeholder="seat_number_place" />
      <van-field input-align="right" :label="carriage_label" v-show="showCarriage" v-model="formData.carriage"
        :placeholder="carriage_place" name="pattern" />
      <van-field input-align="right" v-model="formData.start_addr_list" readonly required name="area" label="出发地"
        placeholder="点击选择省市区" @click="showArea = true" :rules="[{ required: true, message: '请选择正确内容' }]" />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="showArea = false" />
      </van-popup>
      <van-field input-align="right" label="详细地址" required v-model="formData.start_addr" name="pattern"
        placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入正确内容' }]" />

      <van-field input-align="right" v-model="formData.estimated_arrival_date" required name="calendar" label="来连日期"
        placeholder="来连日期" @click="goDlShow = true" :rules="[{ required: true, message: '来连日期' }]" />
      <van-calendar v-model:show="goDlShow" @confirm="goYjConfirm" :min-date="new Date(2015, 0, 0)" />
      <van-field input-align="right" required name="radio" label="是否中转大连">
        <template #input>
          <van-radio-group v-model="zzdl" direction="horizontal">
            <van-radio @click="checkZzdl()" name="1">是</van-radio>
            <van-radio @click="checkZzdl()" name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-calendar v-model:show="goDlShow" @confirm="goDlConfirm" :min-date="new Date(2015, 0, 0)" />

      <van-field v-if="!end3" input-align="right" v-model="formData.end_addr_list" readonly required name="area"
        label="目的地" placeholder="点击选择省市区" @click="showArea2 = true" :rules="[{ required: true, message: '请选择正确内容' }]" />
      <van-popup v-model:show="showArea2" position="bottom">
        <van-area v-model="cascaderArea" value="210200" :area-list="areaList" @confirm="enAreaConfirm"
          @cancel="showArea2 = false" />
      </van-popup>
      <van-field v-if="end3" input-align="right" v-model="formData.end_addr_list" readonly required label="目的地"
        placeholder="请选择目的地" @click="trave_mode_show = true" :rules="[{ required: true, message: '请输入正确内容' }]" />
      <van-popup v-model:show="trave_mode_show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择目的地" :options="options" @close="trave_mode_show = false"
          @finish="onFinish" />
      </van-popup>
      <!-- <van-field
        input-align="right"
        label="所属社区"
        required
        v-model="formData.codename"
        name="pattern"
        placeholder="请选择所属社区"
        @focus="showCode = true"
        :rules="[{ required: true, message: '请选择所属社区' }]"
      /> -->

      <van-field input-align="right" label="详细地址" required v-model="formData.end_addr" name="pattern"
        placeholder="请输入详细居住详细地址" />

      <van-field input-align="right" label="紧急联系人姓名" v-model="formData.emergency_contact_name" name="pattern"
        placeholder="请输入紧急联系人姓名" />
      <van-field input-align="right" label="紧急联系人手机号" v-model="formData.emergency_contact_mobile" name="pattern"
        placeholder="请输入紧急联系人手机号" />

      <!-- <van-field
        input-align="right"
        label="户口所在地"
        v-model="formData.registered_residence"
        name="pattern"
        placeholder="请输入户口所在地"
      /> -->
      <van-field input-align="right" name="radio" label="途经重点关注地区">
        <template #input>
          <van-radio-group v-model="formData.avenue_flow_area" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field input-align="right" name="radio" label="人员状态">
        <template #input>
          <van-radio-group
            v-model="formData.type"
            direction="horizontal">
            <van-radio name="1">未排查</van-radio>
            <van-radio name="0">无需排查</van-radio>
          </van-radio-group>
        </template>
      </van-field> -->
      <van-field input-align="right" name="radio" label="48小时核酸证明">
        <template #input>
          <van-radio-group v-model="formData.nucleic_acid" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="健康码状态">
        <template #input>
          <van-radio-group v-model="formData.healthy_code_status" direction="horizontal">
            <van-radio name="0">绿码</van-radio>
            <van-radio name="1">黄码</van-radio>
            <van-radio name="2">红码</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-row>
        <van-col span="24">
          <p style="font-size: 17px">
            &nbsp;&nbsp;&nbsp;健康码、通信行程卡、48小时内核酸检测报告
          </p>
        </van-col>
      </van-row>
      <van-field input-align="right" name="radio" label="">
        <template #input>
          <div :class="postData.length > 2 ? 'upload-img-5' : 'upload-img-1'">
            <div class="posting-uploader">
              <div class="posting-uploader-item" v-for="(item, nn) in postData" :key="nn">
                <img :src="item.content" alt="图片" class="imgPreview" />
                <van-icon name="close" @click="delImg(nn)" class="delte" />
              </div>
              <van-uploader :after-read="onRead" :accept="'image/*'" v-show="postData.length <= 2">
                <!-- <img src="../../assets/img/img1.png" alt="等待传图" class="imgPreview"> -->
                <!-- <img src="" alt="等待传图" class="imgPreview"> -->
              </van-uploader>
            </div>
          </div>
        </template>
      </van-field>
      <div style="margin: 16px">
        <p style="font-size: 12px">
          <van-checkbox v-model="checked" shape="square">我已阅知本申报所列事项，并保证以上报备内容正确属实</van-checkbox>
        </p>
      </div>
      <div style="margin: 16px; display: flex">
        <van-button block type="info" native-type="submit">确认</van-button>
      </div>
      <div style="margin: 16px"></div>
      <div id="base64Url"></div>
    </van-form>
    <!-- 省市区弹出 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '100%' }">
      <div class="title">上车{{ title }}</div>
      <div class="container">
        <div class="item" v-for="(item, index) in forArea" :key="index" @click="checkoutArea(item)">
          {{ item.name || item }}
        </div>
      </div>
    </van-popup>
    <!-- 性别类型 -->
    <!-- <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexColumns"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup> -->

    <!-- 出行交通方式类型 -->
    <van-popup v-model="showTrave" round position="bottom">
      <van-picker show-toolbar :columns="trave_columns" @cancel="showTrave = false" @confirm="traveConfirm" />
    </van-popup>
    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showCertificate = false" @confirm="onConfirm" />
    </van-popup>
    <!-- 社区code -->
    <van-popup v-model="showCode" round position="bottom">
      <van-picker show-toolbar :columns="showCodeColumns" value-key="name" @cancel="showCode = false"
        @confirm="onCodeConfirm" />
    </van-popup>

    <!-- 日期 -->
    <van-popup v-model="showDate" round position="bottom">
      <van-datetime-picker @confirm="getConfirm" @cancel="showDate = false" :min-date="minDate" type="date"
        title="选择年月日" />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import area from '@/libs/area.json'
import ssq from '@/libs/ssq.json'
import { helpUserInsert } from '@/api/self/help'
import { destinationByCity, getRegionalDivisionJson } from '@/api/self/record'
import { Toast, Dialog } from 'vant'
import lrz from 'lrz'
import xeUtils from 'xe-utils'
export default {
  data() {
    return {
      zzdl: '0',
      cascaderArea: '',
      cascaderValue: '',
      showCarriage: false,
      trave_mode_show: false,
      showTwoLabel: false,
      checked: false,
      goDlShow: false,
      showArea: false,
      showArea2: false,
      areaList,
      minDate: new Date(1900, 0, 1),
      showDate: false, // 选择生日
      seat_number_label: '',
      range_label: '',
      range_place: '',
      carriage_place: '',
      carriage_label: '',
      columns: ['身份证', '护照', '军官证', '港澳通行证', '台胞证'],
      showCodeColumns: [],
      trave_columns: ['飞机', '火车', '轮渡', '自驾', '客运'],
      // sexColumns:['男','女'],
      formData: {
        seat_number: '', // 座位号
        carriage: '', // 车厢
        range_number: '', // 班次
        emergency_contact_name: '', // 紧急联系人姓名
        emergency_contact_mobile: '', // 紧急联系人电话
        trave_mode: '', // 出行交通方式（0飞机 1火车 2轮渡  3自驾  4客运
        estimated_arrival_date: '', // 预计抵达日期
        start_addr_list: '', // 出发地省市区
        end_addr_list: '', // 目的地省市区
        card_type: '', // 证件类型
        name: '', // 姓名
        card_no: '', // 身份证
        // sex: '', // 性别
        mobile: '',
        codename: '',
        // bithday: '', // 出生日期
        registered_residence: '', // 户口所在地
        companion_id: '', // 陪同id new
        healthy_code_status: '0', // 健康状态 new
        uploader: [], // 图片list
        start_addr: '', // 始发地  new
        end_addr: '', // 返连目的地
        avenue_flow_area: '0', // 途经重点关注地区
        nucleic_acid: '1', // 持有核酸检测证明
        code: '',
        enter_type: '7', // （7：入连人员自主报备  8：社区自主报备）
        type: '未排查', // 1 未排查  0 无需排查
        end_addr_district: '',
        end_addr_street: '',
        end_addr_community: '',

        end_addr_province: '',
        end_addr_city: ''
      },
      end3: false,
      // options: ssq,
      options: [],
      forArea: area,
      Province: '', // 省
      city: '', // 市
      area: '', // 区
      title: '省', // 标题省  市  区
      show: false, // 城市选择
      pickerShow: false, // 时间选择
      isGetArea: false, // 是否已经获取上车省市区
      showCertificate: false, // 证件类型
      showCode: false, // 社区code
      showTrave: false, // 出行交通方式类型
      showSex: false, // 性别类型
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      postData: []
    }
  },
  mounted() {
    this.checkZzdl()
    this.initRegionalDivisionJson()
    this.formData.card_no = this.$route.query.idCard
    this.formData.name = this.$route.query.name
    this.formData.mobile = this.$route.query.mobile
    this.formData.card_type = this.$route.query.cardType
    console.log(areaList)
    this.traveConfirm(null)
    // this.formData.code = this.$route.query.code
    window['getNfcData'] = row => {
      let r = JSON.parse(row)
      Toast.clear()
      // if (!r.id) return Toast.fail('nfc读取失败')

      for (let i in this.formData) {
        this.formData[i] = ''
      }
      // this.formData.code = this.$route.query.code
      this.formData.nucleic_acid = '1'
      this.formData.avenue_flow_area = false

      this.formData.name = r.name || ''
      this.formData.card_no = r.id || ''
      // this.formData.sex = r.sex || ''
      r.birthday = r.birthday.replace('年', '-')
      r.birthday = r.birthday.replace('月', '-')
      r.birthday = r.birthday.replace('日', '')
      this.formData.bithday = r.birthday || ''
      this.formData.registered_residence = r.address || ''
      this.formData.card_type = '身份证'
    }
  },
  methods: {
    checkZzdl() {
      if (this.zzdl == 0) {
        // 中转大连显示 区街道社区
        this.end3 = true
        this.formData.end_addr_list = null
        this.formData.end_addr_province = null
        this.formData.end_addr_city = null
        this.formData.end_addr_district = null
      } else if (this.zzdl == 1) {
        // 中转大连显示 否 省市区
        this.end3 = false
        this.formData.end_addr_list = null
        this.formData.end_addr_district = null
        this.formData.end_addr_street = null
        this.formData.end_addr_community = null
      }
    },
    initRegionalDivisionJson() {
      getRegionalDivisionJson().then(res => {
        if (res.data.errcode === 0) {
          this.options = JSON.parse(res.data.data)
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    // 区街道社区
    onFinish({ selectedOptions }) {
      this.trave_mode_show = false
      this.formData.end_addr_list = selectedOptions
        .map(option => option.text)
        .join('/')

      this.formData.end_addr_district = selectedOptions[0].value
      this.formData.end_addr_street = selectedOptions[1].value
      this.formData.end_addr_community = selectedOptions[2].value

      this.formData.end_addr_province = null
      this.formData.end_addr_city = null
      // this.formData.chargeBarrier =
      //   selectedOptions[2] == null
      //     ? selectedOptions[1].text
      //     : selectedOptions[2].text
    },
    // 省市区
    enAreaConfirm(value) {
      this.showArea2 = false
      this.formData.end_addr_list = value
        // .filter((item) => !!item)
        .map(item => item.name)
        .join('/')
      let data = this.formData.end_addr_list.split('/')

      console.log(data)
      console.log('value[0].value=======', data[0])
      this.formData.end_addr_province = data[0]
      this.formData.end_addr_city = data[1]
      this.formData.end_addr_district = data[2]

      this.formData.end_addr_street = null
      this.formData.end_addr_community = null

      // this.formData.end_addr_list = value
      //   .filter((item) => !!item)
      //   .map((item) => item.name)
      //   .join('/')
      // let endAdd = { name: this.formData.end_addr_list }
      // destinationByCity(endAdd).then((res) => {
      //   if (res.data.errcode === 0) {
      //     this.showCodeColumns = res.data.data
      //   } else {
      //     Toast.fail(res.data.msg)
      //   }
      // })
    },
    goYjConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.estimated_arrival_date = yy + '-' + mm + '-' + dd
      this.goYjShow = false
    },
    delImg(index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false
      }
      let tmp = []
      for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
          tmp.push(this.postData[i])
        }
      }
      this.postData = tmp
    },
    dataURLtoFile(dataurl, filename) {
      // 将base64转换为file文件
      // 参数dataurl base64字符串
      // 参数filename	图片名称
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: mime
      })
    },
    onRead(file) {
      lrz(file.file, { quality: 0.1 }).then(rst => {
        file.content = rst.base64
        this.postData.push(file) // postData是一个数组
      })
    },
    getConfirm(value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.bithday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onAreaConfirm(value) {
      this.showArea = false
      this.formData.start_addr_list = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
    },

    onConfirm(value) {
      this.label = value
      this.formData.card_type = value
      this.showCertificate = false
    },
    onCodeConfirm(value) {
      this.formData.code = value.value
      this.formData.codename = value.name
      this.showCode = false
    },

    traveConfirm(value) {
      // this.label = value
      if (!value) {
        // value = '飞机'
        // this.formData.trave_mode = '飞机'
      }
      this.showTrave = false
      if (value == '飞机') {
        // 飞机
        this.range_label = '航班号'
        this.seat_number_label = '座位号'
        this.range_place = '请输入航班号'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '火车') {
        // 火车
        this.range_label = '车次'
        this.seat_number_label = '车厢'
        this.carriage_label = '席位'
        this.range_place = '车次号（例:G3523)'
        this.carriage_place = '席位（例:047号)'
        this.seat_number_place = '车厢（例:01车)'

        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '轮渡') {
        // 轮渡
        this.range_label = '船次号'
        this.seat_number_label = '船舱号'
        this.carriage_label = '车厢'
        this.range_place = '请输入船次号'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '自驾') {
        // 自驾
        this.range_label = '车牌信息'
        this.seat_number_label = '到达收费口'
        this.range_place = '请输入正确信息'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '客运') {
        // 客运
        this.range_label = '车牌号'
        this.seat_number_label = '席位'
        this.range_place = '请输入正确信息'
        this.carriage_place = '请输入正确信息'
        this.seat_number_place = '请输入正确信息'
        this.showTwoLabel = true
        this.showCarriage = false
      }
      this.formData.trave_mode = value
    },
    goDlConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.estimated_arrival_date = yy + '-' + mm + '-' + dd
      this.goDlShow = false
    },
    onSexConfirm(value) {
      this.label = value
      this.formData.sex = value
      this.showSex = false
    },
    testNfc() {
      // 测试用户终端
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        Toast.loading({
          message: '正在识别...',
          forbidClick: true,
          duration: 20000
        })
        window.Android.useNFCReadIdCard('123')
      }
      if (isiOS) {
        return Toast.fail('抱歉\n暂不支持ios')
      }
    },
    onSubmit() {
      if (this.checked == false) {
        Toast.fail('请确认报备内容正确属实')
        return
      }

      this.$refs.formDataRef.validate().then(() => {
        let formdata = JSON.parse(JSON.stringify(this.formData))
        // formdata.sex = this.formData.sex=='男'?1:0
        formdata.trave_mode === '飞机'
          ? (formdata.trave_mode = 0)
          : formdata.trave_mode === '火车'
            ? (formdata.trave_mode = 1)
            : formdata.trave_mode === '轮渡'
              ? (formdata.trave_mode = 2)
              : formdata.trave_mode === '自驾'
                ? (formdata.trave_mode = 3)
                : (formdata.trave_mode = 4)
        formdata.companion_id = this.$route.query.id
        formdata.avenue_flow_area = formdata.avenue_flow_area == '1'
        formdata.nucleic_acid = formdata.nucleic_acid == '1'
        formdata.uploader = this.postData
        formdata.card_type === '港澳通行证'
          ? (formdata.card_type = 4)
          : formdata.card_type === '台胞证'
            ? (formdata.card_type = 5)
            : formdata.card_type === '军官证'
              ? (formdata.card_type = 2)
              : formdata.card_type === '护照'
                ? (formdata.card_type = 3)
                : (formdata.card_type = 1)
        if (formdata.card_type == 4) {
          // 港澳同行证
          var reg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
          if (reg.test(formdata.card_no) === false) {
            Dialog.alert({
              message: '港澳同行证不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => { })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        } else if (formdata.card_type == 2) {
          // 军官证
          var reg = /^[CW]\d{8}$/
          if (reg.test(formdata.card_no) === false) {
            Dialog.alert({
              message: '港澳同行证不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => { })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        } else if (formdata.card_type == 3) {
          // 护照
          var reg = /^([a-zA-z]|[0-9]){5,17}$/
          if (reg.test(formdata.card_no) === false) {
            Dialog.alert({
              message: '护照不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => { })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        } else if (formdata.card_type == 1) {
          // 身份证号
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)|(^[HMhm]{1}([0-9]{10}|[0-9]{8})$)/
          if (reg.test(formdata.card_no) === false) {
            Dialog.alert({
              message: '身份证号不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => { })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        }
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 10000
        })
        helpUserInsert(formdata).then(res => {
          Toast.clear()
          if (res.data.errcode === 0) {
            this.$router.push({
              name: 'recordQrCode',
              query: { id: res.data.data.id }
            })
            // Dialog.alert({
            //   message: '提交成功',
            //   showCancelButton: false,
            //   showConfirmButton: false,
            // }).then(() => {})
            // const TIMEOUT = setTimeout(() => {
            //   Dialog.close()
            //   clearTimeout(TIMEOUT)
            // }, 2000)
            // 提交成功清空数据
            for (let i in this.formData) {
              this.formData[i] = ''
              this.formData.avenue_flow_area = true
            }
          } else {
            Toast.fail(res.data.msg)
          }
        })
      })
    },
    checkoutArea(item) {
      if (!this.Province) {
        // 选择省
        this.Province = item.name
        this.forArea = item.child
        this.title = '市'
      } else if (!this.city) {
        // 选择市
        this.city = item.name
        this.forArea = item.child
        this.title = '区'
      } else if (!this.area) {
        // 选择区
        this.area = item
        this.show = false
        this.title = '省'
        // 拼接省市区 展示页面
        this.formData.start_station_addr =
          this.Province + '/' + this.city + '/' + this.area

        this.forArea = area
        // 清空省市区 为了下一次选择省市区
        this.Province = ''
        this.city = ''
        this.area = ''
      }
    }
  },
  created() { },
  watch: {
    'formData.trave_mode': {
      handler(newVal, oldVal) {
        console.log('newVal======', newVal)
        console.log('oldVal======', oldVal)
        if (newVal == null || newVal == '') {
          return
        }
        var u = window.navigator.userAgent
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
        if (this.formData.name == '' || this.formData.name == undefined) {
          this.formData.trave_mode = ''
          return Toast.fail('请输入姓名')
        }
        if (
          this.formData.card_type == '' ||
          this.formData.card_type == undefined
        ) {
          this.formData.trave_mode = ''
          return Toast.fail('请选择证件类型')
        }
        if (this.formData.card_no == '' || this.formData.card_no == undefined) {
          this.formData.trave_mode = ''
          return Toast.fail('请输入证件号')
        }
        if (this.formData.mobile == '' || this.formData.mobile == undefined) {
          this.formData.trave_mode = ''
          return Toast.fail('请输入电话号码')
        }
        if (xeUtils.locat().protocol == 'http:') {
          if (newVal == '飞机') {
            let formdata = JSON.parse(JSON.stringify(this.formData))
            formdata.trave_mode = 0
            helpUserInsert(formdata).then(res => {
              if (res.data.errcode === 0) {
                var id = res.data.data.id
                var mobile = this.formData.mobile
                console.log(res.data.data.id)
                var url =
                  'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                  id +
                  '&mobile=' +
                  mobile

                if (isAndroid) {
                  window.open(
                    // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                    url,
                    '_blank'
                  )
                } else {
                  window.open(
                    // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                    url,
                    '_self'
                  )
                }
              } else {
                Toast.fail('获取id失败请重新选择来连方式')
              }
            })
          }
        } else if (xeUtils.locat().protocol == 'https:') {
          if (newVal == '飞机') {
            if (this.formData.name == '' || this.formData.name == undefined) {
              return Toast.fail('请输入姓名')
            }
            if (
              this.formData.card_type == '' ||
              this.formData.card_type == undefined
            ) {
              return Toast.fail('请选择证件类型')
            }
            if (
              this.formData.card_no == '' ||
              this.formData.card_no == undefined
            ) {
              return Toast.fail('请输入证件号')
            }
            if (
              this.formData.mobile == '' ||
              this.formData.mobile == undefined
            ) {
              return Toast.fail('请输入电话号码')
            }
            let formdata = JSON.parse(JSON.stringify(this.formData))
            formdata.trave_mode = 0
            helpUserInsert(formdata).then(res => {
              if (res.data.errcode === 0) {
                var id = res.data.data.id
                console.log(res.data.data.id)
                var mobile = this.formData.mobile

                var url =
                  'https://wssb.dlairport.com/Default3.aspx?id=' +
                  id +
                  '&mobile=' +
                  mobile
                if (isAndroid) {
                  window.open(
                    // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                    url,
                    '_blank'
                  )
                } else {
                  window.open(
                    // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                    url,
                    '_self'
                  )
                }
              } else {
                Toast.fail('获取id失败请重新选择来连方式')
              }
            })
          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.upload-img-5 {
  margin: 5px 0 90px 0;
}

.upload-img-1 {
  margin: 5px 0 15px 0;
}

.home {
  background: url('../../assets/images/smtb.jpg') no-repeat;

  img {
    // background: url('../../assets/images/smtb.jpg');
    width: 100%;
  }

  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }

  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }

  /deep/.van-field__label {
    width: 8em;
  }

  /deep/.van-field__error-message {
    text-align: right;
  }

  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }

  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;

    .item {
      margin: 10px;
    }
  }
}

.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}

.home .blue {
  background-color: transparent;
}

.home .van-cell {
  background-color: transparent;
}
</style>
